import React from 'react';
import { useState, useCallback } from 'react';

// 函数组件的特点:
// 当组件中任意一个state 状态发生变化, 函数组件都会重新执行

// 发生的问题如下:
// 当修改下面的count 变量时, 由于函数组件的count发生变化, 导致函数组件重新执行
// 所以 addGoldFn 方法被反复重建,开辟一个内存空间,将内存地址执行addGoldFn;
// 该开辟内存的过程浪费了浏览器的性能,可不可以不让addGoldFn 函数反复创建?

// 回答上述问题
// 当然可以,借助使用useCallback 这个hook, 做性能优化
// 语法: const 函数名= useCallback(()=>{},[依赖的变量,...])
// 当依赖的变量为空数组时, 说明没有变化,函数永远不重新创建,只有第一次创建了, 后续不创建
// 当以来的变量发生变化, 参数1函数会重新创建

const Father = () => {
    const [keyword, setkeyword] = useState('');
    const [list, setlist] = useState(['何仙姑', '曹国舅'])

    // 定义count 变量
    const [count, setCount] = useState(100)
    // 添加函数
    // 当addGoldFn 依赖的数组为空数组时,那么useCallback中参数1 的函数只在初始化创建,
    // 后续keywprds 发生变化, 参数1函数没有被重复创建, 所以参数1函数中的keyowrds 还是
    // 第一次加载的keyowrds,所以为空字符,所以当点击添加的的时候, 不会有新的内容添加

    //面试题? 
    // 请说出useMemo 和useXCallback 的区别?
    // 相同点: 都是处理性能优化的
    // 不同点: useMemo 相当于vue中的计算属性, 缓存的值. useCallback 缓存的是一个函数 

    const addGoldFn = useCallback(() => {
        list.push(keyword);
        setlist([...list])
    }, [keyword])

    console.log('addGoldFn');
    return (
        <div>

            <p onClick={() => setCount(count + 1)}>count:{count}</p>
            <hr />
            {/* 输入框部分 */}
            <p>
                <input type='text' value={keyword} onChange={(e) => {
                    setkeyword(e.target.value)
                }} />
                <button onClick={addGoldFn}>添加</button>
            </p>
            {/* 列表渲染部分 */}
            <ul>
                {
                    list.map((item, index) => <li key={index}>{index}-{item}</li>)
                }
            </ul>
        </div>
    );
}

export default Father;
